<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    </style>
    <script src="/zoom/hammer.min.js"></script>
    <script src="/zoom/hammer-time.min.js"></script>
    <script src="/zoom/hammer-zoom.js"></script>
</head>

<body>
    <div id="div" style="border: 1px solid blue;">
        <canvas id="canvas" style="border: 1px solid red;"></canvas>
    </div>
    <div id="con"></div>
    <div id="con1"></div>
    <div id="con2"></div>
    <script>
    let _log = document.getElementById('con')
    let _log1 = document.getElementById('con1')
    let _log2 = document.getElementById('con2')
    let width = window.innerWidth
    let height = window.innerHeight
    console.log(width, height)
    let c = document.getElementById("canvas");
    c.width = 400
    c.height = 400
    let ctx = c.getContext("2d");
    // ctx.fillStyle = "#FF0000";
    // ctx.fillRect(0, 0, 150, 75);
    let image = new Image()
    image.src = '/zoom/img.png'
    image.onload = function() {
        console.log('image', image.height, image.width)
        ctx.drawImage(image, 0, 0, width, width)
    }
    let div = document.getElementById('div')
    console.log('div.style.transform', div.style.transform)
    _log.innerHTML = JSON.stringify(div.style.transform)
    let pic = new Zoom('#div', _log, ctx);
    let scale = 1
    ctx.lineWidth = 5
    let lx = 0
    let ly = 0
    div.addEventListener('touchstart', function(e) {
        // console.log('touchstart', e)
        let t = e.targetTouches[0]
        _log2.innerHTML = JSON.stringify({
            clientX: t.clientX,
            clientY: t.clientY,
        })

    })
    div.addEventListener('touchmove', function(e) {
        console.log('touchmove', e)
        let t = e.targetTouches[0]
        _log2.innerHTML = JSON.stringify({
            clientX: t.clientX,
            clientY: t.clientY,
        })
    })
    div.addEventListener('touchend', function(e) {
        console.log('touchend', e)
        // let t = e.targetTouches[0]
        // _log2.innerHTML = JSON.stringify({
        //     clientX: t.clientX,
        //     clientY: t.clientY,
        // })
    })
    pic.centerPonitor = {
        x: c.width / 2,
        y: c.height / 2,
        org: {
            x: c.width / 2,
            y: c.height / 2,
        },
    }
    pic.oPonitor = {
        x: 0,
        y: 0,
        xCd: c.width / 2,
        yCd: c.height / 2,
        org: {
            x: 0,
            y: 0,
            xCd: c.width / 2,
            yCd: c.height / 2,
        }
    }
    pic.onPan = function(ev) {
        // console.log('ev', ev)
        // document.getElementById('sc').innerHTML = ev.scale
        if (ev.scale != 1)
            return
        let translateX = this.translateX || 0
        let translateY = this.translateY || 0

        let x = ev.center.x
        let y = ev.center.y
        ctx.fillStyle = "#FF0000";
        let scale = this.scale

        // pic.oPonitor.x += translateX + (1 - scale) * pic.oPonitor.xCd
        // pic.oPonitor.y += translateY + (1 - scale) * pic.oPonitor.yCd
        
        pic.centerPonitor.x += translateX
        pic.centerPonitor.x += translateY
        let changeX = (1 - scale) * Math.abs(x - pic.centerPonitor.x)
        let changeY = (1 - scale) * Math.abs(y - pic.centerPonitor.y)
        let lX = x
        let lY = y
        console.log('lX, lY', lX, lY)
        _log1.innerHTML = JSON.stringify({
            scale,
            changeX,
            changeY,
            x,
            y,
            centerPonitor: pic.centerPonitor,
            oPonitor: pic.oPonitor,
        })
        if (ev.type == 'panstart') {
            ctx.beginPath();
            // ctx.moveTo(x - translateX, y - translateY);
            ctx.moveTo(lX, lY);
        };
        // if (ev.type == 'panmove') {
        // ctx.lineTo(x - translateX, y - translateY);
        ctx.lineTo(lX, lY);
        ctx.stroke();
        // };
    }
    pic.init();
    </script>
</body>

</html>